$(function () {
    // 图表1 
    // 1- 指定图表父容器 ，创建echarts实例 
    var myChart1 = echarts.init(document.getElementById('c1'));

    // 2-指定图表相关设置和数据
    var option1 = {
        // 标题 
        title: {
            text: '2019年网咖营业    '
        },
        // 提示工具 
        tooltip: {},
        // 图例
        legend: {
            data: ['会员人数', '普通人数']
        },
        // x轴
        xAxis: {
            data: ["一月", "二月", "三月", "四月", "五月", "六月"]
        },
        // y轴 ： 会根据数据智能生成 
        yAxis: {},
        // 系列： 
        series: [
            {
                name: '会员人数',
                type: 'bar', //bar 柱图 line 线图 pie 饼图 
                data: [5, 20, 56, 10, 10, 20]
            },
            {
                name: '普通人数',
                type: 'bar',
                data: [25, 10, 30, 60, 20, 50]
            }
        ]
    };

    // 3- 将数据交给 echarts实例进行绘制 
    myChart1.setOption(option1);

    // 图表2
    // 1- 指定图表父容器 ，创建echarts实例 
    var myChart2 = echarts.init(document.getElementById('c2'));

    // 2-指定图表相关设置和数据
    var option2 = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            left: 'right',
            orient: 'vertical',
            x: 'left',
            data: [ '青铜会员', '白银会员', '黄金会员', '钻石会员','至尊会员']
        },
        series: [
            {
                name: '热销会员',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: 335, name: '青铜会员' },
                    { value: 310, name: '白银会员' },
                    { value: 234, name: '黄金会员' },
                    { value: 135, name: '钻石会员' },
                    { value: 1548, name: '至尊会员' }
                ]
            }
        ]
    };

    // 3- 将数据交给 echarts实例进行绘制 
    myChart2.setOption(option2);
})